<template>
  <div class="oa-form">
    <div class="oa-form-input">
      <template v-for="(item, index) in formNode">
        <div
          class="oa-form-input-list"
          v-if="!item.state"
          :key="index"
          :style="{ width: item.width ? item.width : '' }"
        >
          <div
            class="oa-form-input-list-label"
            :style="{
              width: item.labelWidth ? item.labelWidth : '110px',
            }"
            v-if="item.label"
          >
            {{ item.label }}
          </div>
          <component
            v-model="formModel[item.modelName]"
            :clearable="true"
            :is="item.componentName"
            :change-on-select="item.changeOnSelect"
            :placeholder="item.placeholder || '请输入' + item.label"
            :type="item.optional ? item.optional.type : ''"
            :style="{ width: item.itemWidth ? item.itemWidth : '' }"
            range-separator="至"
            :valueFormat="
              item.optional
                ? item.optional.valueFormat || 'yyyy-MM-dd HH:mm:ss'
                : ''
            "
            :format="
              item.optional ? item.optional.format || 'yyyy-MM-dd HH:mm:ss' : ''
            "
            :start-placeholder="
              item.optional ? item.optional.startPlaceholder || '开始日期' : ''
            "
            :end-placeholder="
              item.optional ? item.optional.endPlaceholder || '结束日期' : ''
            "
            :disabled="item.optional ? item.optional.disabled : false"
            :multiple="item.optional ? item.optional.multiple : false"
            @change="
              (val) => {
                item.change && item.change(val);
              }
            "
            @click="
              () => {
                item.click && item.click();
              }
            "
          >
            <!-- 按钮 -->
            <template v-if="item.componentName == 'el-button'">{{
              item.optional ? item.optional.text : ""
            }}</template>
            <!-- 下拉部分 -->
            <template v-if="item.componentName == 'el-select'">
              <el-option
                v-for="(ite, ind) in item.optional.option"
                :key="ind"
                :label="ite.label"
                :value="ite.value"
              ></el-option>
            </template>
            <!-- radio -->
            <template v-if="item.componentName == 'el-radio-group'">
              <el-radio
                v-for="(ite, ind) in item.optional.option"
                :key="ind"
                :label="ite.label"
                >{{ ite.value }}</el-radio
              >
            </template>
            <!-- checkbox -->
            <template v-if="item.componentName == 'el-checkbox-group'">
              <el-checkbox
                v-for="(ite, ind) in item.optional.option"
                :key="ind"
                :label="ite.label"
                >{{ ite.value }}</el-checkbox
              >
            </template>
          </component>
        </div>
      </template>
      <div class="oa-form-button" v-if="formNode.length>0" v-show="!hiddenButton">
        <el-button type="primary" @click="search" :loading="buttonLoading">查询</el-button>
        <el-button @click="reset" :loading="buttonLoading">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "oa-form",
  components: {},
  props: ["formNode", "formModel", "hiddenButton", "search", "reset", "buttonLoading"],
  data() {
    return {
      formNodes: [],
    };
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="scss">
@import "./style.scss";
</style>
